<!--
 * @description  : 案件-检查编码选择
 * @descriptionDetail: 案件-检查编码选择
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-08-25 15:43:11
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar backText="返回" title="检查编码选择">
      <view class="nav-right-icon">
        <text class="" @click="save">
          确定
        </text>
      </view>
    </theme-navbar>
    <!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <view class="content u-page">
      <view class="searchbar">
        <u-search placeholder="请输入当事人" v-model="keyword" @custom="toSearch" @clear="clear">
        </u-search>
      </view>
      <list-view
        :top="100"
        :useUp="false"
        :load-data="loadData"
        :height="getListViewHeight()"
        ref="mescrollItem0"
      >
        <view class="p_content" slot-scope="d">
          <view class="real-content" @click="choice(d.data, d.index)">
            <u-row gutter="16" class="row-t">
              <u-col span="7">
                <view class="text-title">
                  {{ d.data.managerName }}({{ d.data.checkDate }})
                </view>
              </u-col>
              <u-col span="5" class="row-t">
                <view class="text-title">
                  {{ d.data.licNo }}
                </view>
              </u-col>
            </u-row>
            <u-row gutter="16" class="row-t">
              <u-col span="12">
                <view class="text-sub">
                  {{ d.data.companyName }}
                </view>
              </u-col>
            </u-row>
            <u-row gutter="16" class="row-t">
              <u-col span="12">
                <view class="text-sub">
                  {{ d.data.superviseItemImplementCode }}
                </view>
              </u-col>
            </u-row>
            <u-row gutter="16" class="row-t">
              <u-col span="12">
                <view class="text-sub">
                  {{ d.data.superviseItemName }}
                </view>
              </u-col>
            </u-row>
          </view>
          <u-icon
            style="margin-right: 10rpx;"
            name="checkbox-mark"
            color="#2979ff"
            size="38"
            v-show="d.data.checked"
          ></u-icon>
        </view>
      </list-view>
    </view>
  </view>
</template>

<script>
	import listView from '@/components/list_view.vue';
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import zjCommonService from "@/service/common/common.service";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			listView,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				keyword: '',
				selectIds: [],
				selectItems: [],
				isSingle: true,
				fContent: [{
					iconPath: require('@/static/confirm.png'),
					selectedIconPath: require('@/static/confirm.png'),
					text: '确定',
					active: false,
				}],
			}
		},
		onLoad(opt) {
			this.isSingle = opt.isSingle;
		},
		mounted() {
			this.setRightBtns();
		},
		methods: {
			setRightBtns() {
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("确定", () => {
					this.save();
					this.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.save();
				}
			},
			getListViewHeight() {
				let x = "0px";
				// #ifdef H5-DINGDING  || H5-WECHAT || H5-EMP
				x = (this.$u.sys().windowHeight - uni.upx2px(80) - this.$u.sys().statusBarHeight) + "px";
				// #endif
				// #ifndef H5-ONLY
				x = (this.$u.sys().windowHeight - 44 - uni.upx2px(80) - this.$u.sys().statusBarHeight) + "px";
				// #endif
				return x;
			},
			// 调用后台接口查询数据
			loadData(page) {
				let self = this;
				this.$modal.showLoading('加载中...');
				return new Promise(resolve => {
					zjCommonService.jgsxCheckLst(1, 100, {
						dealType: "10210022",
						managerName: this.keyword,
					}).then(res => {
						this.$modal.hideLoading();
						if (res.success) {
							res.data.forEach(itm => {
								itm.checked = this.selectIds.includes(itm.idCardNo);
							});
							resolve({
								data: {
									list: res.data,
								},
							});
						} else {
							this.$modal.alert("查询失败:" + res.msg);
							resolve({
								data: {
									list: [],
								},
							});
						}
					}).catch(err => {
						this.$modal.hideLoading();
						this.$modal.alert("查询失败:" + err);
						resolve({
							data: {
								list: [],
							},
						});
					});
				});
			},
			// 添加检测信息
			save() {
				if (this.selectItems.length == 0) {
					this.$api.toast('请选择');
					return;
				}
				this.backPrev({
					paramKey: "backCheckCode",
					param: this.selectItems,
				});
			},
			toSearch() {
				this.getMescroll(this.tabIndex).triggerDownScroll();
			},
			clear() {
				this.keyword = '';
				this.getMescroll(this.tabIndex).triggerDownScroll();
			},
			choice(item, index) {
				if (this.isSingle) {
					this.selectIds = [item.idCardNo, ];
					this.selectItems = [item, ];
					this.$refs.mescrollItem0.listDatas.forEach(itm => {
						itm.checked = this.selectIds.includes(itm.idCardNo);
					});
				} else {
					let len = -1;
					for (let i = 0; i < this.selectIds.length; i++) {
						if (this.selectIds[i] == item.idCardNo) {
							len = i;
							break;
						}
					}
					if (len == -1) {
						this.selectIds.push(item.idCardNo);
						this.selectItems.push(item);
					} else {
						this.selectIds.splice(len, 1);
						this.selectItems.splice(len, 1);
					}
					this.$refs.mescrollItem0.listDatas.forEach(itm => {
						itm.checked = this.selectIds.includes(itm.idCardNo);
					});
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.p_content {
		width: 100%;
		padding: 20rpx 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid $u-border-color;
	}

	.real-content {}

	.text-title {
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.text-sub {
		font-size: 24rpx;
		color: #B2B2B2;
	}

	.searchbar {
		position: fixed;
		top: 44px;
		width: 100%;
		padding: 30rpx;
		z-index: 999;
		background-color: white;
	}

	.confirm {
		position: fixed;
		bottom: 0;
		left: 0rpx;
		right: 0rpx;
		height: 100rpx;
		background-color: #F9FBFA;
		box-shadow: 0 0 4rpx #333;
		padding: 10rpx 30rpx;
	}

	.lb {
		display: inline-block;
	}

	.nav-right-icon {
		margin-right: 20rpx;
		color: white;
	}

	.row-t {
		margin: 5rpx 0rpx;
	}
</style>
